<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='商品规格' :isTitleStyle="true"></CustomNavbar>
	
	<view class="container">
		
		<uni-data-checkbox @change="handleChange" v-model="checkedValue" multiple :localdata="specOrigin"/>
		<uni-table ref="table" class="mt20" border stripe 
			emptyText="暂无更多数据" 
			>
			<!-- type="selection" -->
			<!-- @selection-change="selectionChange" -->
			<uni-tr>
				<uni-th width="66">启用</uni-th>
				<uni-th width="80" v-for="(item,index) in specDynamics" :key="index">{{item.text}}</uni-th>
				<uni-th width="100">进货单价</uni-th>
				<uni-th width="100">销售单价</uni-th>
				<uni-th width="100">数量</uni-th>
			</uni-tr>
			<uni-tr v-for="(item,index) in specList" :key="index">
				
				<uni-td>
					<checkbox-group @change="checkboxChange($event,index)">
						<checkbox :value="index" :checked="item.checked"></checkbox>
					</checkbox-group>
				</uni-td>
				
				<!-- 循环列 -->
				<block v-for="(items,inx) in index.split('-')" :key="inx">
					
					<uni-td>
						{{items}}
					</uni-td>
					
				</block>
				
					<uni-td>
						<uni-easyinput :value="item.purchasePrice" @blur="handleInputChange($event,index,'purchasePrice')" :clearable="clearable" type="digit" />
					</uni-td>
					<uni-td>
						<uni-easyinput :value="item.salePrice" @blur="handleInputChange($event,index,'salePrice')" :clearable="clearable" placeholder="" type="digit" />
					</uni-td>
					<!-- <uni-td>
						<uni-number-box :value="item" @blur="handleChangeNumber($event,index)" background="#0d6efd" color="#fff" />
					</uni-td> -->
					<uni-td>
						<uni-easyinput :value="item.number" @blur="handleInputChange($event,index,'number')" :clearable="clearable" placeholder="" type="number" />
					</uni-td>
			</uni-tr>
		</uni-table>
		 
		<button type="primary" @click="submit()" :disabled="isButtonDisabled" class="mt60">提交</button>
		
	</view>
	
</template>
<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import {
		productApi
	} from '@/utils/api.js'
	export default {
		props: {
			// product_id: {
			// 	type: String, 
			// 	default: '',
			// },
		},
		data() {
			return {
				checkedValue: [], //规格默认选中
				specDynamics: [
					// { //商品规格
					// 	text: '跑步',
					// 	value: 0
					// },
					// {
					// 	text: '游泳',
					// 	value: 1
					// },
				],
				specOrigin: [], //规格初始值
				isButtonDisabled: false, //提交按钮禁用
				specList: [], //渲染数据源列表
				selectedRows: [],
				clearable: true,
				postData: []
			}
		},
		components:{
			CustomNavbar
		},
		onLoad(options) {
			this.product_id = options.product_id;
			let that = this;
			productApi.spec({product_id:that.product_id}).then(res => {
				for (let i of res.spec) {
					that.specOrigin.push({text:i.title,value:i.id}) //获取规格初始值【不修改】
					if (i.checked === true) {
						that.checkedValue.push(i.id); //默认选中的规格【仅使用id，所以不能代替specDynamics】
						that.specDynamics.push({text:i.title,value:i.id}) //获取规格初始值【动态，用于列】
					}
				}
				that.specList = res.specList;
				that.postData = res.specList;
			})
			
			console.log(this.checkedValue)
			console.log(this.specDynamics)
			console.log(this.specList)
			console.log(this.postData)
		},
		methods: {
			//规格切换【同时更新规格以及规格值】
			handleChange(e){
				const tempArr = [];
				for (let i of e.detail.value) {
					for (let j of this.specOrigin) {
						// console.log(j)
						// console.log(j.value)
						if (i == j.value) {
							tempArr.push(j);
						}
					}
				}
				this.specDynamics = tempArr; //重新赋值
				
				for (let i of this.specDynamics) {
					console.log(i)
				}
				console.log(this.specDynamics)
			},
			//表格复选框
			checkboxChange(e,index){
				if (e.detail.value.length == 0) { //非选中清除该键值数据
					let news = [];
					for (const [key, value] of Object.entries(this.postData)) {
						// console.log(`${key} => ${value.number}`);
						// console.log(`${key} => ${value.number}`);
						if (key != index) {
							news[key] = value;
						}	
					}
					this.postData = news
					this.postData = [...this.postData]
				} else {//选中情况需要去源数据追加
					for (const [key, value] of Object.entries(this.specList)) {
						if (key == index) {
							this.postData[key] = value; //直接追加
						}	
					}
				} 
			    console.log(this.postData) //todo 切换后数据打印在，但是提交的时候为空？
			},
			//事件监听【进货单价、销售单价、数量】
			handleInputChange(e,index,key){
				this.specList[index][key] = e.detail.value
			},
			//提交
			submit(){
				// console.log(this.specDynamics)
				// console.log(this.activeIndexs);
				productApi.specSave({product_id:this.product_id,spec:this.specDynamics,specInfo:this.postData}).then(res => {
					console.log(res)
				})
			}
		}
	}

</script>

